<template>
	<el-dialog :visible.sync="dialogVisible" :title="titleMap[type-1]" :width="type==1?'680px':'460px'" destroy-on-close append-to-body @closed="$emit('closed')">

		<template v-if="type==1">
			<div class="sc-user-select">
				<div class="sc-user-select__left">
					<div class="sc-user-select__search">
						<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
							<template #append>
								<el-button icon="el-icon-search" @click="search"></el-button>
							</template>
						</el-input>
					</div>
					<div class="sc-user-select__select">
						<div class="sc-user-select__tree" v-loading="showGrouploading">
							<div class="wh-scroll-wraper">
								<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupId" @node-click="groupClick">
                  <div class="menu-item" slot-scope="{ node, data }">
                    <el-tooltip v-if="node.label.length>12" class="item" effect="dark" :content="node.label" placement="top">
                      <span>{{node.label}}</span>
                    </el-tooltip>
                    <span v-else>{{node.label}}</span>
                  </div>
                </el-tree>
							</div>
						</div>
						<div class="sc-user-select__user" v-loading="showUserloading">
							<div class="sc-user-select__user__list">
								<div class="wh-scroll-wraper" ref="userScrollbar">
									<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
								</div>
							</div>
							<footer>
								<el-pagination background layout="prev,next" small :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
							</footer>
						</div>
					</div>
				</div>
				<div class="sc-user-select__toicon"><i class="el-icon-arrow-right"></i></div>
				<div class="sc-user-select__selected">
					<header>已选 ({{selected.length}})</header>
					<ul>
						<el-scrollbar>
							<li v-for="(item, index) in selected" :key="item.id">
								<span class="name">
									<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
									<label>{{item.name}}</label>
								</span>
								<span class="delete">
									<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
								</span>
							</li>
						</el-scrollbar>
					</ul>
				</div>
			</div>
		</template>

		<template v-if="type==2">
			<div class="sc-user-select sc-user-select-role">
				<div class="sc-user-select__left">
					<div class="sc-user-select__select">
						<div class="sc-user-select__tree" v-loading="showGrouploading">
							<el-scrollbar class="wh-scroll-wraper">
								<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
							</el-scrollbar>
						</div>
					</div>
				</div>
				<div class="sc-user-select__toicon"><i class="el-icon-arrow-right"></i></div>
				<div class="sc-user-select__selected">
					<header>已选 ({{selected.length}})</header>
					<ul>
						<el-scrollbar>
							<li v-for="(item, index) in selected" :key="item.id">
								<span class="name">
									<label>{{item.name}}</label>
								</span>
								<span class="delete">
									<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
								</span>
							</li>
						</el-scrollbar>
					</ul>
				</div>
			</div>
		</template>


		<template #footer>
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save">确 认</el-button>
		</template>
	</el-dialog>
</template>

<script>
import {
  userListPageByDeptId,
  currentUserDeptTree,
  roleTree
} from '../../network/api.js'
	export default {
		props: {
			modelValue: { type: Boolean, default: false },
      baseUrl: {
        type: String,
        default: ''
      },
      headers: {
        type: Object,
        default: () => {
          return {}
        }
      },
      groupProps: {
        type: Object,
        default: () => {
          return {
            key: 'id',
            label: 'label',
            children: 'children'
          }
        }
      },
      userProps: {
        type: Object,
        default: () => {
          return {
            key: 'id',
            label: 'name'
          }
        }
      },
      roleProps: {
        type: Object,
        default: () => {
          return {
            key: 'id',
            label: 'label',
            children: 'children'
          }
        }
      }
		},
		data() {
			return {
				// groupProps: config.group.props,
				// userProps: config.user.props,
				// roleProps: config.role.props,

				titleMap: ['人员选择', '角色选择'],
				dialogVisible: false,
				showGrouploading: false,
				showUserloading: false,
				keyword: '',
				groupId: '',
				pageSize: 10,
				total: 0,
				currentPage: 1,
				group: [],
				user: [],
				role: [],
				type: 1,
				selected: [],
				value: []
			}
		},
		computed: {
			selectedIds(){
				return this.selected.map(t => t.id)
			}
		},
		mounted() {

		},
		methods: {
			//打开赋值
			open(type, data){
				this.type = type
				this.value = data||[]
				this.selected = JSON.parse(JSON.stringify(data||[]))
				this.dialogVisible = true

				if(this.type==1){
					this.getGroup()
					this.getUser()
				}else if(this.type==2){
					this.getRole()
				}

			},
			//获取组织
			async getGroup(){
				this.showGrouploading = true;
        // var res = await config.group.apiObj.get();
        var res = await currentUserDeptTree(this.baseUrl, this.headers, {})
        console.log(res);
        this.showGrouploading = false;
        var allNode = {[this.groupProps.key]: '', [this.groupProps.label]: '所有'}
        console.log(res.data);
        res.data.unshift(allNode);
        this.group = res.data
			},
			//获取用户
			async getUser(){
				this.showUserloading = true;
				// var params = {
				// 	[config.user.request.keyword]: this.keyword || null,
				// 	[config.user.request.groupId]: this.groupId || null,
				// 	[config.user.request.page]: this.currentPage,
				// 	[config.user.request.pageSize]: this.pageSize
				// }
				// var res = await config.user.apiObj.get(params);
        const params = {
          deptId: this.groupId || '103',
          pageSize: this.pageSize,
          pageNum: this.currentPage
        }
        var res = await userListPageByDeptId(this.baseUrl, this.headers, params)

				this.showUserloading = false;
				this.user = res.data.rows
				this.total = res.data.total || 0;
        this.$refs.userScrollbar.scrollTop = 0
			},
			//获取角色
			async getRole(){
        console.log('获取角色');
				this.showGrouploading = true;
				// var res = await config.role.apiObj.get();
        var res = await roleTree(this.baseUrl, this.headers, {})
				this.showGrouploading = false;
				this.role = res.data
			},
			//组织点击
			groupClick(data){
				this.keyword = ''
				this.currentPage = 1
				this.groupId = data[this.groupProps.key]
				this.getUser()
			},
			//用户点击
			userClick(data, checked){
				if(checked){
					this.selected.push({
						id: data[this.userProps.key],
						name: data[this.userProps.label]
					})
				}else{
					this.selected = this.selected.filter(item => item.id != data[this.userProps.key])
				}
			},
			//用户分页点击
			paginationChange(){
				this.getUser()
			},
			//用户搜索
			search(){
				this.groupId = ''
				this.$refs.groupTree.setCurrentKey(this.groupId)
				this.currentPage = 1
				this.getUser()
			},
			//删除已选
			deleteSelected(index){
				this.selected.splice(index,1);
				if(this.type==1){
					this.$refs.userTree.setCheckedKeys(this.selectedIds)
				}else if(this.type==2){
					this.$refs.groupTree.setCheckedKeys(this.selectedIds)
				}
			},
			//角色点击
			roleClick(data, checked){
				if(checked){
					this.selected.push({
						id: data[this.roleProps.key],
						name: data[this.roleProps.label]
					})
				}else{
					this.selected = this.selected.filter(item => item.id != data[this.roleProps.key])
				}
			},
			//提交保存
			save(){
				this.value.splice(0,this.value.length);
				this.selected.map(item => {
					this.value.push(item)
				})
				this.dialogVisible = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.sc-user-select {display: flex;}
	.sc-user-select__left {width: 400px;}
	.sc-user-select__right {flex: 1;}

	.sc-user-select__search {padding-bottom:10px;}

	.sc-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
	.sc-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
	.sc-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
	.sc-user-select__user__list {flex: 1;overflow: auto;}
	.sc-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}

	.sc-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
	.sc-user-select__toicon i {display: flex;justify-content: center;align-items: center;background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}

	.sc-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
	.sc-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
	.sc-user-select__selected ul {height:300px;overflow: auto;}
	.sc-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
	.sc-user-select__selected li .name {display: flex;align-items: center;}
	.sc-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
	.sc-user-select__selected li .name label {}
	.sc-user-select__selected li .delete {display: none;}
	.sc-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
	.sc-user-select__selected li:hover .delete {display: inline-block;}

	.sc-user-select-role .sc-user-select__left {width: 200px;}
	.sc-user-select-role .sc-user-select__tree {border: none;height: 343px;}
	.sc-user-select-role .sc-user-select__selected {}

	[data-theme='dark'] .sc-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
	[data-theme='dark'] .sc-user-select__toicon i {background: #383838;}

  .wh-scroll-wraper {
    overflow-x: hidden;
    overflow-y: auto;
    height: 300px;
    .menu-item {
      flex: 1;
    }
  }
  ::v-deep .el-tree-node__content {
    width: 100% !important;
    box-sizing: border-box !important;
  }
</style>
